<script setup>
defineOptions({
    name: "management"
});
import { ref, onMounted } from "vue";
import { getListAgentDept, getListMerchantName, getListDtlAgente, getReleaseDetail,exportListByAgent, getSalaryDtlState } from "@/api/merchant";
import { useRoute } from "vue-router";
import { formatDateTime, downloadFile } from '@/utils'
const route = useRoute();

const size = ref("default");
const background = ref(false);
const disabled = ref(false);
const pageTotal = ref(0);
const currentPage = ref(1);
const pickerValue = ref("");
const inputMerchant = ref("");

const serviceCompany = ref([])
const serviceCompanyVal = ref('')

const loading = ref(false)

const tableData = ref([]);

const inputNo = ref('')
const inputIDCard = ref('')

const amountOptionValue = ref('')
const amountOptionOptions = ref([])

const detailedStatusVal = ref('')
const detailedStatusOptions = ref([])
onMounted(() => {
    getListTableData();
})

const tablePageSize = ref(10)
const handleSizeChange = (val) => {
    tablePageSize.value = val
    currentPage.value = 1
    getListTableData({ pageNum: 1});
};

const handleCurrentChange = (val) => {
    getListTableData({ pageNum: val });
};
function getParams(params) {
    const [start, end] = getPickerTime()
    const _params = {
        pageNum: 1,
        pageSize: tablePageSize.val,
        createTimeStart: start,
        createTimeEnd: end,
        total: 0,
        ...params
    };
    if (route.query.batchOrtradeOrderNumber) {
        inputNo.value = route.query.batchOrtradeOrderNumber
    }
    if (inputIDCard.value !== '') {
        _params.name = inputIDCard.value
    }
    if (inputMerchant.value !=='') {
        _params.merchantsName = inputMerchant.value
    }
    if (serviceCompanyVal.value !== '') {
        _params.taxSourcesId = serviceCompanyVal.value
        _params.total = 19
    }
    if (inputNo.value !=='') {
        _params.batchOrtradeOrderNumber = inputNo.value
    }
    if (detailedStatusVal.value !=='') {
        _params.state = detailedStatusVal.value
    }
    
    return _params
}
function getListTableData(params) {
    const _params = getParams(params)
    getReleaseDetail({ ..._params }).then((res) => {
        tableData.value = res.rows;
        pageTotal.value = res.total;
    });
}

// 获取selec 数据
getListAgentDept().then((res) => {
    // merchantOptions.value = res.data;
});

// 获取select数据
getListDtlAgente({ type: 1 }).then((res) => {
    serviceCompany.value = res.rows
})

getSalaryDtlState().then((res) => {
    detailedStatusOptions.value = res.data
})


// 重置页面
const onReset = () => {
    pickerValue.value = ''
    amountOptionValue.value = ''
    inputMerchant.value = ''
    serviceCompanyVal.value = ''
    pageTotal.value = 0
    currentPage.value = 1
    inputNo.value = ''
    detailedStatusVal.value = ''
    inputIDCard.value = ''
    tablePageSize.value = 10
    getListTableData();
}
// 输入选择商户的时候
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        getListMerchantName({ merchantsName: query }).then((res) => {
            amountOptionOptions.value = res.rows
        }).finally(() => {
            loading.value = false
        })
    }
}
// 时间picker变化的时候
const pickerChange = () => {
    getListTableData({
        total: 6
    })
}

const amountSelectChange = () => {
    getListTableData()
}
const exportFile = () => {
    const _params = getParams()
    exportListByAgent({..._params}, { responseType: 'blob' }).then((res) =>{
        const { data, headers } = res
        downloadFile(data, headers)
    })
}
function getPickerTime() {
    const [startTime, endTime] = pickerValue.value
    const start = new Date(startTime)
    const end = new Date(endTime)
    return startTime ? [formatDateTime(start), formatDateTime(end)] : ''
}
getPickerTime()
</script>
<template>
    <div class="c-page">
        <div class="c-page__search">
            <div class="block">
                <el-input v-model="inputNo" size="large" placeholder="请输入交易单号/批次号"></el-input>
            </div>
            <div class="block">
                <el-select @change="amountSelectChange" remote reserve-keyword filterable :loading="loading" v-model="inputMerchant"
                    :remote-method="remoteMethod" size="large" placeholder="请输入选择商户">
                    <el-option v-for="item in amountOptionOptions" :key="item.id" :label="item.merchantsName"
                        :value="item.merchantsName" />
                </el-select>
            </div>
            <div class="select">
                <el-select size="large" v-model="serviceCompanyVal" placeholder="请选择服务公司">
                    <el-option v-for="item in serviceCompany" :key="item.type" :label="item.name" :value="item.type">
                    </el-option>
                </el-select>
            </div>
            <div class="block">
                <el-input v-model="inputIDCard" size="large" placeholder="请输入姓名/身份证号"></el-input>
            </div>
            <div class="select">
                <el-select size="large" v-model="detailedStatusVal" placeholder="请选择明细状态">
                    <el-option v-for="item in detailedStatusOptions" :key="item.code" :label="item.desc" :value="item.code">
                    </el-option>
                </el-select>
            </div>
            <div class="time zd">
                <el-date-picker @change="pickerChange" v-model="pickerValue" size="large" type="daterange"
                    range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
                </el-date-picker>
            </div>
            <div class="search-btn">
                <el-button @click="getListTableData" type="primary" size="large">查询</el-button>
                <el-button @click="onReset" size="large">重置</el-button>
                <el-button @click="exportFile" type="primary" size="large">导出</el-button>
            </div>
        </div>
        <div class="c-page__bg">
            <el-table :data="tableData">
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column  prop="idNumber" label="身份证号"> </el-table-column>
                <el-table-column  prop="payerBankName" label="银行名称"></el-table-column>
                <el-table-column  prop="receivedAccountName" label="收款通道"></el-table-column>
                <el-table-column  prop="taxAmount" label="实发金额">
                </el-table-column>
                <el-table-column  prop="remark" label="备注"> </el-table-column>
                <el-table-column  label="创建时间"></el-table-column>
                <el-table-column  prop="createTime" label="创建时间"></el-table-column>
                <el-table-column  prop="timeOfRelease" label="发放时间"></el-table-column>
                <el-table-column prop="stateDisplay" label="状态"></el-table-column>
            </el-table>
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" :page-size="tablePageSize" :page-sizes="[10,20,30]" :size="size" :disabled="disabled"
                    :background="background" layout="total, sizes, prev, pager, next" :total="pageTotal"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.block,
.select {
    padding-bottom: 15px;
    padding-right: 30px;
    width: 23%;
}

.time {
    padding-bottom: 15px;
    padding-right: 15px;
}

.c-page__bg {
    display: flex;
    width: 100%;
    height: 100%;
    padding-bottom: 24px;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.c-dot-success,
.c-dot-info {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #43bf0a;
}

.flex-row {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #262626;
}

.c-dot-info {
    background-color: #bfbfbf;
}

.pagination-block {
    padding-top: 20px;
    padding-right: 10px;
    display: flex;
    justify-content: flex-end;
}

.c-text-primary {
    font-size: 14px;
    color: #1c9fff;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}
</style>
